iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 10

第九章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆゚.*・。 (反)

  • 分享至 

  • xImage
  •  

前言

在昨天的文章中我們詳細了介紹 何謂 CSS Animation,而今天我們就來了解 Animation 內有哪些屬性可以運用吧!

Animation 基礎語法

@keyframe

關鍵幀(keyframes) 是用來指定動畫運作期間個時間點的動畫屬性值。
@keyframes 使用方法如下:

@keyframes <keyfeames-name>{<rule-list>}
  • keyframes-name: 使用者自定義動畫名稱,普通文字與字串符會被默認同一規則名稱,但大寫與小寫則會視為不同規則名稱,另外使用者無法使用 noneinitial 這個關鍵字。
    以下為 keyframe-name 範例:
/* 普通文字或字串符皆被視為同一規則名稱 */
@keyframes foo { ... }
@keyframes "foo" { ... }

/* 大寫與小寫為不同規則名稱 */
@keyframes foo { ... }
@keyframes FOO { ... }

/* 使用者無法直接使用 inital 或 none 兩個關鍵字 */
@keyframes initial { ... }
@keyframes None { ... }

/* 但若是使用字串符的 "inital" 或 "none" 則可以運行 */
@keyframes "initial" { ... }
@keyframes "None" { ... }

  • keyframes-block: rule-list 內允許 keyframes-block 所定義的規則,在 keyframe-block 中你可以放入任何 CSS 除了有關於 Aniamtion 的屬性。
    but!,人生最重要的這個 but,此規則 可以 使用 animation-time-funciton 屬性並給予其特殊定義。不過由於其內的 CSS 屬性不參與 CSS cascade 所以即便在 keyframes-block 內的屬性上使用 !important 也不會有任何作用。

  • keyframes-selector: 指定關鍵幀的動畫持續時間,可由百分比 100% 0% 或關鍵字 from to,所組成。
    關鍵字 from 等於 百分比 0%, 即起始值、關鍵字 to 等於 百分比 100%,即結束值。小於 0% 或大於 100% 都會被視為無效數值。

    注意!
    百分比單位 必須 有 % 單位符號,若直接使用 0,是無效的。

    若使用者未指定起始值,則起始值會自動從 0% 開始計算,同理,若使用者沒有指定結束值,結束值將會自動設定 100% 。

animation-name

如前面所敘述。
另外要提到的是,若有重複的 Animation 屬性在不同的 animation-name ,則會由後向前覆蓋。

  • none
    特殊關鍵字,可用於停用動畫而不需要透過改變 CSS 選擇器,或是停用 cascade 中的動畫。
  • keyframes-name
    標示動畫規則的名稱。
.box {
  animation-name: slide-right;
}

@keyframes slide-right {
    <rule-list>
}

animation-duration

定義單個動畫週期的持續時間。

若時間值為 0 ,則對於動畫 keyframes 將會無效,但動畫本身仍會作用,但只會發生在一瞬間。更具體的來說,時間值 0 確實是有觸發整個動畫的開始與結束,只是使用者肉眼無法所見。

而負數的值對於 time 則會無效。

animation-timing-function

設定動畫在關鍵幀中加速度的函式,此定義了每一個動畫週期的節奏感,可做出握們在前面 動畫12法則中 漸快與漸慢(Slow in and slow out) 效果,可以為一個或多個值。

  • linear
    無任何加速度變化。

    linear
  • ease、ease-in、ease-out、ease-in-out
    加速度或減速度。

    ease
  • step
    按照關鍵幀數,一步一步 的動作。

    step-start

有關於 timing-function 的定義,會在後面篇章有更詳細的介紹,敬請大家期待。

animation-iteration-count

定義動畫播放次數,初始值為 1,表示動畫會從頭到尾播放 一次,通常此屬性會與 animation-directionalternate 屬性一起使用。讓動畫能夠順暢的在交替循環反向播放。

  • infinite
    無限次循環播放
  • < number >
    使用者自訂播放次數,若該數值不是整數,則動畫會在最後一個循環中途結束。若數值為負數雜無效。
    數值 0 是有效的,效果類似animation-duration 的數值 0。

    播放次數:2

animation-direction

定義動畫播放方向是由正向或反向起始播放。反向播放時 timing functions 也會相反。舉例來說:正向播放時為 ease-in,設定反向播放的話則為 ease-out

  • normal
    按照指定方向正向播放方向。

    正向播放
  • reverse
    按照動畫方向反向播放。
  • alternate
    奇數次數以指定方向正向播放並且循環,偶數次數以反向播放並且循環。
  • alternate-reverse
    奇數次數以反向播放並且循環,偶數次數以沿著正常方向正向播放並且循環。

animation-play-state

並億動畫是否正常播放或停止運行。

  • running
    動畫正常運行。
  • paused
    動畫暫停運行。雖然畫面上為靜止狀態,但 keyframes 仍然作用於元素中。當取消 paused (及重新 running) 動畫將會從被中斷處開始運行。

animation-delay

定義動畫起始時間,即動畫應用到元素上到動畫開始時的時間長度。
0s 為預設值。代表動畫應用到元素後立即執行動作。

若時間長度設定負數,則他會從動畫中間開始進行播放,此時效果看起來像是畫面還沒選染完成便已經開始運作動畫了。

animation-fill-mode

定義當動畫不播放時(在開始前,結束後以及兩者)的元素狀態。此屬性無論是在動畫播放前或後,都不會引響到元素原始 CSS。

  • none
    預設值,動畫在播放完畢後必定回到最初狀態。
  • forwards
    動畫結束後保持在最後一個關鍵幀的屬性值。
    animation-iteration-count >0 時,其應用的值為動畫最後一次所使用的屬性,當 animation-iteration-count =0 時,其應用的值為第一次開始的屬性。
  • backwards
    動畫結束後動畫結束後保持在第一個關鍵幀的屬性值(取決於 animation-delay)
    效果和 none 差不多。
  • both
    動畫將遵循 forwards 與 backwards 規則。

讀到這邊各位有了解 Animation 每一個屬性的運用了嗎? Animation 能套用的屬性實在是非常多,有時候不太了解的話還是會需要反覆去查詢。

而明天我們會來介紹一下 CSS Animation 事件機制,以及不免俗的帶著大家做一些簡單的小動畫。看來明天的文章也會相當精彩,大家別錯過囉~

我們明天見!ㄅㄅ!


參考資料


上一篇
第八章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆゚.*・。 (正)
下一篇
第十章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆゚.*・。 (合)
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言